<template>
  <el-card class="aui-card--fill" shadow="never">
    <div class="header">
      <h1>我的购物车</h1>
      <div class="order">
        <span>{{ userId }}</span>
        <span class="head_right_in">|</span>
        <a class="head_right_in">我的订单</a>
      </div>
    </div>
    <div class="cart">
      <el-table
          ref="multipleTable"
          :data="goodList"
          class="table"
          height="500"
          style="width: 100%"
          tooltip-effect="dark"
          @selection-change="handleSelectionChange"
      >
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column label="商品图片" width="150">
          <template slot-scope="scope">
            <el-image :src=" (scope.row.picUrl)" style="width: 100px; height: 100px"
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
            label="商品名称"
            prop="goodName"
            width="200">
        </el-table-column>
        <el-table-column
            label="单价"
            show-overflow-tooltip
            width="200"
        >{{ price }}
        </el-table-column>
        <el-table-column
            label="数量"
            show-overflow-tooltip
            width="300"

        >
          <template slot-scope="scope">
            <div class="num">
              <button v-show="scope.row.goodNum!= 0" class="el-icon-minus" @click="minus(scope.row)"></button>
              {{ scope.row.goodNum }}
              <button class="el-icon-plus" @click="plus(scope.row)"></button>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            align="right">
          <template slot="header" slot-scope="scope">
            <el-button type="success" @click="toggleSelection()">取消全选</el-button>
          </template>
        </el-table-column>

      </el-table>
      <div class="total-set">
        <div class="total">合计：{{ totalPrice }}</div>
        <el-button class="settlement" type="success" @click="createOrder()">去结算</el-button>
      </div>
    </div>

  </el-card>

</template>
<script>
import params from "@/views/modules/sys/params.vue";

export default {
  created() {
    this.getUserId();
  }
  ,
  data() {
    return {
      userId: 0,
      goodList: [],
      multipleSelection: [],
      isShow: true,
      price: 16,
      totalPrice: 0,
      order: {},
    }
  }
  ,
  methods: {
    getCartByUserId(index) {
      this.$http.get('cart/cart/listCart', {params: {id: index}}).then(({data: res}) => {
        this.goodList = res.data
      }).catch(() => {
      })
    },
    getUserId() {
      this.$http.get('/cart/cart/getId', {
        // 解构赋值
      }).then(({data: res}) => {
        this.userId = res
        this.getCartByUserId(this.userId)
        // location.reload();
      }).catch(() => {

      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.totalPrice = 0
      for (let i = 0; i < val.length; i++) {
        this.totalPrice += 16 * val[i].goodNum;

      }
    },
    toggleSelection(rows) {

      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    }, minus(item) {
      var num = --item.goodNum
      if (num == 0) {
        this.isShow = false;
      }
      this.$http.put("cart/cart/updateNum", {
        userId: this.userId,
        goodId: item.goodId,
        goodNum: num
      }).then(({data: res}) => {
        this.totalPrice = 0
        for (let i = 0; i < this.multipleSelection.length; i++) {
          this.totalPrice += 16 * this.multipleSelection[i].goodNum;
        }
      }).catch(() => {
      })
    }, plus(item) {
      var num = ++item.goodNum
      if (num > 0) {
        this.isShow = true
      }
      this.$http.put("cart/cart/updateNum", {
        userId: this.userId,
        goodId: item.goodId,
        goodNum: num
      }).then(({data: res}) => {
        this.totalPrice = 0
        for (let i = 0; i < this.multipleSelection.length; i++) {
          this.totalPrice += 16 * this.multipleSelection[i].goodNum;
        }
      }).catch(() => {
      })
    },

    createOrder() {
      // console.log(this.multipleSelection)
      localStorage.setItem("goodList", JSON.stringify(this.multipleSelection));
      localStorage.setItem("total", this.totalPrice)
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: '无结算商品',
          center: true
        });
      } else {
        // 创建订单
        let myDate = new Date().toLocaleString();
        this.$http.post("orders/orders/createOrders", {
          // orders: this.order
          orderId: null,
          userId: this.userId,
          orderTotal: this.totalPrice,
          orderDate: myDate,
          daId: 1,
          orderState: 0
        }).then(({data: res}) => {
          this.createOrderDet(res.data)
          localStorage.setItem("orderId", res.data);
          this.$router.replace({name: 'orders'})
        }).catch(() => {
        })
      }

    }, createOrderDet(orderId) {
      let data = []
      for (let i = 0; i < this.multipleSelection.length; i++) {
        let info = {}
        info.odId = 0
        info.orderId = orderId
        info.foodId = this.multipleSelection[i].goodId
        info.quantity = this.multipleSelection[i].goodNum
        data.push(info)
      }
      this.$http.post("orderdetailet/orderdetailet/create",
          data
      ).then(({data: res}) => {
      }).catch(() => {
      })
    }
  }
  ,
  watch: {
    /**
     * 监测到路由发生跳转时刷新一次页面
     * @param to
     * @param from
     */
    $route(to, from) {
      window.location.reload();
    }
    ,
  }
  ,

}
</script>
<style>
.header {
  background-color: #e6e6e6;
  width: 100%;
  height: 100px;
  position: relative;
}

.order {
  width: 300px;
  position: relative;
  top: -40px;
  left: 1190px;
}

h1 {
  margin-left: 20px;
  margin-top: 30px;
  padding-top: 35px;
}

/*==============================================================================================================================*/
.cart {

  width: 100%;
  height: 400px;
  background-color: #e6e6e6;

}

.settlement {
  position: absolute;
  top: 5px;
  width: 400px;
  height: 50px;
  margin-top: 20px;
  left: 550px;
  display: block;
}

.total {
  top: 25px;
  position: absolute;
  left: 400px;
  width: 190px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
}

.num {
  width: 200px;
  height: 50px;
}

.total-set {
  position: relative;
  width: 100%;
  height: 100px;
}

</style>